<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				background: #fff;
			}
			
			.mui-tab-label {
				font-size: 14px;
				color: #333;
			}
			
			.mui-bar {
				background: #fff;
				border-top: 1px solid #ededed;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-tab-item>i {
				height: 22px;
				width: 22px;
				margin: 4px auto 0;
				display: block;
				background: url('../../images/indextab.png')no-repeat;
				background-size: 110px 44px;
			}
			
			.mui-tab-item>.home {
				background-position: 0 0;
			}
			
			.mui-tab-item>.classify {
				background-position: -22px 0;
			}
			
			.mui-tab-item>.special {
				background-position: -44px 0;
			}
			
			.mui-tab-item>.shopping {
				background-position: -66px 0;
			}
			
			.mui-tab-item>.my {
				background-position: -88px 0;
			}
			/*选中样式*/
			
			.mui-active .mui-tab-label {
				color: #b20000;
			}
			
			.mui-active>.home {
				background-position: 0 -22px;
			}
			
			.mui-active>.classify {
				background-position: -22px -22px;
			}
			
			.mui-active>.special {
				background-position: -44px -22px;
			}
			
			.mui-active>.shopping {
				background-position: -66px -22px;
			}
			
			.mui-active>.my {
				background-position: -88px -22px;
			}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="home.html" id="home">
				<i class="home"></i>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="classify.html">
				<i class="classify"></i>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" href="special.html" id="special">
				<i class="special"></i>
				<span class="mui-tab-label">专题</span>
			</a>
			<a class="mui-tab-item" href="shopping.html" id="shopping">
				<i class="shopping"></i>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" href="my.html">
				<i class="my"></i>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			//mui初始化
			mui.init();
			mui.plusReady(function() {
				var wv = plus.webview.currentWebview();
				// 关闭侧滑返回功能
				wv.setStyle({
					'popGesture': 'none'
				});

				plus.screen.lockOrientation("portrait-primary");
				var subpages = ['home.html', 'classify.html', 'special.html', 'shopping.html', 'my.html'];

				var subpage_style = {
					top: '0',
					bottom: '51px'
				};
				for(var j = 0; j < subpages.length; j++) {
					if(plus.webview.getWebviewById(subpages[j])) {
						plus.webview.getWebviewById(subpages[j]).close()
					}
				}

				var aniShow = {}; //加载首页
				var self = plus.webview.currentWebview();
				var sub = plus.webview.create(subpages[0], subpages[0], subpage_style);
				self.append(sub);
				//当前激活选项
				var activeTab = subpages[0];

				//选项卡点击事件
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					if(!JSON.parse(localStorage.getItem('userData')) && subpages[$(this).index()] == 'my.html') {
						$.each($('.mui-tab-item'), function() {
							if($(this).attr('href') == activeTab) {
								var self = $(this)
								setTimeout(function() {
									self.addClass("mui-active").siblings().removeClass("mui-active");
								}, 0)
							}
						})

						plus.webview.open('../login/login.html', '../login/login.html', {}, 'slide-in-right')
						return
					}

					var targetTab = this.getAttribute('href');
					if(targetTab == activeTab) {
						return;
					}
					var currentClickTab = $(this);
					var i = currentClickTab.index();
					setTimeout(function() {
						currentClickTab.addClass("mui-active").siblings().removeClass("mui-active");
					}, 0)
					//是否第一次加载其他页面
					if(!plus.webview.getWebviewById(subpages[i])) {
						sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						self.append(sub);
					}
					//显示目标选项卡
					//若为iOS平台或非首次显示，则直接显示
					if(mui.os.ios || aniShow[targetTab]) {
						plus.webview.show(targetTab);
					} else {
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow, temp);
						plus.webview.show(targetTab, "fade-in", 300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
					//更改当前活跃的选项卡
					activeTab = targetTab;
				});
				mui.back = function() {
					plus.runtime.quit();
				};
			})

			document.addEventListener('gohome', function() {
				var home = document.getElementById("home");
				//模拟首页点击
				mui.trigger(home, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(home !== current) {
					current.classList.remove('mui-active');
					home.classList.add('mui-active');
				}
			});
			document.addEventListener('shopping', function() {
				var shopping = document.getElementById("shopping");
				//模拟首页点击
				mui.trigger(shopping, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(shopping !== current) {
					current.classList.remove('mui-active');
					shopping.classList.add('mui-active');
				}
			});

			document.addEventListener('special', function() {
				var special = document.getElementById("special");
				//模拟首页点击
				mui.trigger(special, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(special !== current) {
					current.classList.remove('mui-active');
					special.classList.add('mui-active');
				}
			});
			if(common.data && JSON.parse(localStorage.getItem('shopPingCar'))) {
				common.local()
			}
			document.addEventListener('shopPingCar', function() {
				if(JSON.parse(localStorage.getItem('userData')) && JSON.parse(localStorage.getItem('shopPingCar'))) {
					common.local()
				} else {
					if(plus.webview.getWebviewById('shopping.html')) {
						plus.webview.getWebviewById('shopping.html').reload()
					}
				}
			})
		</script>
	</body>

</html>